import React, {useState, useEffect} from 'react';


let requestApi = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(['暴龙兽', '数码暴龙兽', '亚古兽', '钢铁加鲁鲁', '天使兽']);
    }, 10)
  })

};

function Effect() {
  let [users, setUsers] = useState([]);
  let [personId, setPersonId] = useState(0);
  let [aa, setAa] = useState(0);
  // 最开始的时候 进行网络请求

  // useEffect
  // 没有第二个参数 挂载 更新  卸载的时候
  // 如果有第二个参数  根据第二个参数改变情况执行
  // 返回值 : 是一个回调 只有组件卸载的时候 会执行


  // 只有在初始化的时候执行
  useEffect(async () => {
    let res = await requestApi();
    setUsers(res);
    return () => {
      console.log('回调');
    }
  }, []);

  useEffect(() => {
    console.log('personId的useEffect');
    return () => {
      console.log('回调');
    }
  }, [personId]);

  useEffect(() => {
    console.log('aa的useEffect');
    return () => {
      console.log('回调');
    }
  }, [aa]);

  // 最开始
  // 页面更新的时候
  return (
    <div>
      <h2>{personId} {aa}</h2>
      {
        users.map(item => <div key={item}>{item}</div>)
      }
      <button onClick={() => setPersonId(10)}>改变personId</button>
      <button onClick={() => setAa(10)}>改变Aa</button>
    </div>
  );
}


function Parent() {
  let [count, setCount] = useState(0);
  return (<div>
    <button onClick={() => setCount(count++)}>
      切换组件
    </button>
    {
      count % 2 === 0 ? <Effect/> : <div>
        我是备胎
      </div>
    }
  </div>);
}

// 1. 要在 页面开始加载的时候 订阅
// 2. 要在页面卸载的时候 取消订阅
// 3. 在请求网络的时候 成功: success的订阅  失败 会触发 fail订阅
// 4. 在成功的订阅里面 改变state> personId的值  用useEffect 捕获到 PersonId的改变

export default Parent;
